<template>
  <div class="group-grid">
    <div class="group-title">
      <span class="bar"></span>
      <span class="text">{{ title }}</span>
    </div>
    <div class="grid-list">
      <div v-for="item in items" :key="item.label" class="grid-item" @click="$emit('itemClick', item)">
        <div class="icon-wrap">
          <i :class="item.icon" />
        </div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  title: string
  items: { icon: string; label: string }[]
}>()

defineEmits(['itemClick'])
</script>

<style scoped lang="scss">
.group-grid {
  margin: 0 16px 36px 16px;
  padding: 32px 22px 22px 22px;
  background: #f7f9fc;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  .group-title {
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 26px 0;
    .bar {
      width: 8px;
      height: 32px;
      background: #009fe8;
      border-radius: 4px;
      margin-right: 14px;
      display: inline-block;
    }
    .text {
      color: #222;
      font-size: 28px;
      font-weight: bold;
    }
  }
  .grid-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); // 原为4，现为3
    gap: 48px 26px; // 行间距加大
    padding: 0;
  }
  .grid-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 4px 0;
    transition: box-shadow 0.2s;
    cursor: pointer;
    aspect-ratio: 1.5 / 1; // 让宽高比为1，现代浏览器支持
    min-height: 90px;   // 兼容性考虑，也可以直接用 height: 140px;
    justify-content: center;
    .icon-wrap {
      margin-bottom: 10px;
      font-size: 48px;
      color: #1890ff;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
    }
    .icon-wrap i {
      font-size: 50px !important;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .label {
      font-size: 24px;
      color: #222;
      font-weight: 600;
      margin-top: 2px;
      text-align: center;
      word-break: keep-all;
    }
    &:hover {
      box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }
  }
}
</style>
